@using jiuyuan.服务
@using jiuyuan.数据.基础数据类
@using jiuyuan.管理器
@using Microsoft.AspNetCore.Components.Forms

<div class="admin-container">
    <div class="admin-header">
        <h3>效果配置管理</h3>
        <button class="btn-primary" @onclick="添加新效果">添加新效果</button>
    </div>

    <div class="admin-content">
        @if (!数据已加载)
        {
            <div class="loading">正在加载数据...</div>
        }
        else
        {
            <div class="filters">
                <input type="text" @bind="搜索关键词" placeholder="搜索效果名称..." class="form-control" @oninput="应用筛选" />
                <select @bind="筛选效果类型" class="form-control" >
                    <option value="">所有类型</option>
                    @foreach (var type in 所有效果类型)
                    {
                        <option value="@type">@type</option>
                    }
                </select>
            </div>

            <div class="item-list">
                @foreach (var 效果 in 显示效果列表)
                {
                    <div class="item-card">
                        <div class="item-info">
                            <h4>@效果.名称</h4>
                            <p>类型: @效果.效果类型</p>
                            <p>触发时机: @效果.触发时机</p>
                            <p>描述: @效果.描述</p>
                            <p>创建时间: @效果.创建时间.ToString("yyyy-MM-dd HH:mm")</p>
                        </div>
                        <div class="item-actions">
                            <button class="action-button view-button" @onclick='() => 查看效果详情(效果)'>查看</button>
                            <button class="action-button edit-button" @onclick='() => 编辑效果(效果)'>编辑</button>
                            <button class="action-button delete-button" @onclick='() => 删除效果(效果.Id)'>删除</button>
                        </div>
                    </div>
                }
            </div>
        }
    </div>
</div>

<!-- 效果详情弹窗 -->
<div class="modal" style="display: @(显示详情弹窗 ? "block" : "none");">
    <div class="modal-content">
        <div class="modal-header">
            <h3>效果详情</h3>
            <button class="close-button" @onclick="关闭详情弹窗">&times;</button>
        </div>
        <div class="modal-body">
            @if (选中的效果 != null)
            {
                <div class="detail-grid">
                    <div class="detail-item">
                        <label>效果名称:</label>
                        <span>@选中的效果.名称</span>
                    </div>
                    <div class="detail-item">
                        <label>效果类型:</label>
                        <span>@选中的效果.效果类型</span>
                    </div>
                    <div class="detail-item">
                        <label>触发时机:</label>
                        <span>@选中的效果.触发时机</span>
                    </div>
                    <div class="detail-item">
                        <label>持续回合数:</label>
                        <span>@选中的效果.持续回合数</span>
                    </div>
                    <div class="detail-item">
                        <label>触发概率:</label>
                        <span>@选中的效果.触发概率.ToString("P")</span>
                    </div>
                    <div class="detail-item full-width">
                        <label>描述:</label>
                        <span>@选中的效果.描述</span>
                    </div>
                    <div class="detail-item full-width">
                        <label>参数配置:</label>
                        <div class="params-preview">
                            @if (选中的效果.参数.Any())
                            {
                                @foreach (var param in 选中的效果.参数)
                                {
                                    <div class="param-preview">
                                        <span class="param-name">@param.Key:</span>
                                        <span class="param-value">@param.Value</span>
                                    </div>
                                }
                            }
                            else
                            {
                                <span class="no-params">无参数</span>
                            }
                        </div>
                    </div>
                    <div class="detail-item">
                        <label>创建时间:</label>
                        <span>@选中的效果.创建时间.ToString("yyyy-MM-dd HH:mm")</span>
                    </div>
                    <div class="detail-item">
                        <label>更新时间:</label>
                        <span>@选中的效果.更新时间.ToString("yyyy-MM-dd HH:mm")</span>
                    </div>
                </div>
            }
        </div>
    </div>
</div>

<!-- 编辑效果弹窗 -->
<div class="modal" style="display: @(显示编辑弹窗 ? "block" : "none");">
    <div class="modal-content large">
        <div class="modal-header">
            <h3>@(IsEditing ? "编辑效果" : "添加新效果")</h3>
            <button class="close-button" @onclick="关闭编辑弹窗">&times;</button>
        </div>
        <div class="modal-body">
            @if (当前效果 != null)
            {
                <div class="form-grid">
                    <div class="form-group">
                        <label for="effectName">效果名称:</label>
                        <input type="text" id="effectName" @bind="当前效果.名称" class="form-control" />
                    </div>
                    <div class="form-group">
                        <label for="effectType">效果类型:</label>
                        <select id="effectType" value="@当前效果.效果类型" class="form-control" @onchange="(args) => { 当前效果.效果类型 = args.Value.ToString(); 效果类型改变(args); }">
                            <option value="">请选择效果类型</option>
                            @foreach (var type in 所有效果类型)
                            {
                                <option value="@type">@type</option>
                            }
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="triggerTime">触发时机:</label>
                        <select id="triggerTime" @bind="当前效果.触发时机" class="form-control">
                            <option value="立即">立即触发</option>
                            <option value="战斗开始">战斗开始时触发</option>
                            <option value="回合开始">回合开始时触发</option>
                            <option value="攻击时">攻击时触发</option>
                            <option value="受击时">受到攻击时触发</option>
                            <option value="装备时">装备时触发</option>
                            <option value="卸下时">卸下时触发</option>
                            <option value="常驻效果">持续生效</option>
                        </select>
                    </div>
                    <div class="form-group">
                        <label for="duration">持续回合数:</label>
                        <input type="number" id="duration" @bind="当前效果.持续回合数" class="form-control" min="0" />
                    </div>
                    <div class="form-group">
                        <label for="probability">触发概率:</label>
                        <input type="number" id="probability" @bind="当前效果.触发概率" class="form-control" min="0" max="1" step="0.01" />
                    </div>
                    <div class="form-group full-width">
                        <label for="effectDescription">描述:</label>
                        <textarea id="effectDescription" @bind="当前效果.描述" class="form-control" rows="3"></textarea>
                    </div>
                    
                    <!-- 参数配置区域 -->
                    <div class="form-group full-width">
                        <label>参数配置:</label>
                        <div class="params-container">
                            <div class="params-header">
                                <span>参数列表</span>
                                <button type="button" class="btn-secondary small" @onclick="添加参数">添加参数</button>
                            </div>
                            
                            @if (当前效果.参数.Any())
                            {
                                @foreach (var param in 当前效果.参数.ToList())
                                {
                                    <div class="param-item">
                                        <div class="param-row">
                                            <input type="text" value="@param.Key" placeholder="参数名" class="form-control param-name-input" @onchange="(args) => 更新参数名(param.Key, args.Value.ToString())" />
                                            <input type="text" value="@param.Value" placeholder="参数值" class="form-control param-value-input" @onchange="(args) => 更新参数값(param.Key, args.Value.ToString())" />
                                            <button type="button" class="btn-danger small" @onclick="() => 移除参数(param.Key)">移除</button>
                                        </div>
                                    </div>
                                }
                            }
                            else
                            {
                                <div class="no-params">暂无参数，点击"添加参数"按钮添加</div>
                            }
                        </div>
                    </div>
                </div>
                <div class="btn-group">
                    <button class="btn-primary" @onclick="保存效果">@(!IsEditing ? "添加" : "更新")</button>
                    <button class="btn-secondary" @onclick="关闭编辑弹窗">取消</button>
                </div>
            }
        </div>
    </div>
</div>

<style>
    .filters {
        display: flex;
        gap: 15px;
        margin-bottom: 20px;
    }
    
    .filters .form-control {
        flex: 1;
    }

    .modal-content.large {
        max-width: 800px;
    }

    /* 参数容器样式 */
    .params-container {
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        padding: 15px;
        background-color: rgba(30, 30, 60, 0.5);
    }

    .params-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 15px;
        padding-bottom: 10px;
        border-bottom: 1px solid #4a2c8d;
    }

    .params-header span {
        color: #b19cd9;
        font-weight: 500;
    }

    .param-item {
        margin-bottom: 10px;
    }

    .param-row {
        display: flex;
        gap: 10px;
        align-items: center;
    }

    .param-name-input, .param-value-input {
        flex: 1;
    }

    .param-preview {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        border-bottom: 1px solid rgba(74, 44, 141, 0.5);
    }

    .param-name {
        color: #b19cd9;
        font-weight: 500;
    }

    .param-value {
        color: #a0a0e0;
    }

    .params-preview {
        background-color: rgba(30, 30, 60, 0.8);
        border: 1px solid #4a2c8d;
        border-radius: 5px;
        padding: 10px;
    }

    .no-params {
        color: #666;
        font-style: italic;
        text-align: center;
        padding: 20px;
    }
</style>

@code {
    [Inject] public 效果管理器 效果管理器 { get; set; } = default!;
    [Inject] public ILogger<效果配置管理> Logger { get; set; } = default!;
    [Inject] public IJSRuntime JSRuntime { get; set; } = default!;

    private List<效果配置> 效果列表 = [];
    private List<效果配置> 显示效果列表 = [];
    private List<string> 所有效果类型 = [];
    private bool 数据已加载 = false;
    private string 搜索关键词 = "";
    private string 筛选效果类型 = "";

    private 效果配置 当前效果 = new 效果配置();
    private 效果配置 选中的效果 = new 效果配置();
    private bool IsEditing = false;
    private Guid 编辑中的效果Id = Guid.Empty;
    private bool 显示详情弹窗 = false;
    private bool 显示编辑弹窗 = false;

    protected override async Task OnInitializedAsync()
    {
        await 加载效果数据();
        所有效果类型 = 效果管理器.获取所有效果类型();
    }

    private async Task 加载效果数据()
    {
        try
        {
            效果列表 = await 效果管理器.获取所有效果配置From数据库();
            应用筛选();
            数据已加载 = true;
            StateHasChanged();
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "加载效果数据时发生错误");
        }
    }

    private void 应用筛选()
    {
        var 结果 = 效果列表.AsQueryable();

        if (!string.IsNullOrEmpty(搜索关键词))
        {
            结果 = 结果.Where(e => e.名称.Contains(搜索关键词, StringComparison.OrdinalIgnoreCase));
        }

        if (!string.IsNullOrEmpty(筛选效果类型))
        {
            结果 = 结果.Where(e => e.效果类型 == 筛选效果类型);
        }

        显示效果列表 = 结果.ToList();
    }

    private void 查看效果详情(效果配置 效果)
    {
        选中的效果 = 效果;
        显示详情弹窗 = true;
    }

    private void 关闭详情弹窗()
    {
        显示详情弹窗 = false;
    }

    private void 添加新效果()
    {
        当前效果 = new 效果配置
        {
            Id = Guid.NewGuid(),
            名称 = "新效果",
            描述 = "",
            效果类型 = "",
            触发时机 = "立即",
            持续回合数 = 0,
            触发概率 = 1.0f,
            参数 = new Dictionary<string, object>(),
            创建时间 = DateTime.Now,
            更新时间 = DateTime.Now,
            是否启用 = true
        };
        IsEditing = false;
        编辑中的效果Id = Guid.Empty;
        显示编辑弹窗 = true;
    }

    private void 编辑效果(效果配置 效果)
    {
        // 深拷贝效果对象，避免直接修改原始数据
        当前效果 = new 效果配置
        {
            Id = 效果.Id,
            名称 = 效果.名称,
            描述 = 效果.描述,
            效果类型 = 效果.效果类型,
            触发时机 = 效果.触发时机,
            持续回合数 = 效果.持续回合数,
            触发概率 = 效果.触发概率,
            参数 = new Dictionary<string, object>(效果.参数),
            创建时间 = 效果.创建时间,
            更新时间 = DateTime.Now,
            是否启用 = 效果.是否启用
        };
        IsEditing = true;
        编辑中的效果Id = 效果.Id;
        显示编辑弹窗 = true;
    }

    private void 关闭编辑弹窗()
    {
        显示编辑弹窗 = false;
    }

    private async Task 删除效果(Guid 效果Id)
    {
        var confirmed = await JSRuntime.InvokeAsync<bool>("confirm", "确定要删除这个效果吗？");
        if (confirmed)
        {
            try
            {
                await 效果管理器.删除效果配置(效果Id);
                await 加载效果数据();
            }
            catch (Exception ex)
            {
                Logger.LogError(ex, "删除效果时发生错误");
            }
        }
    }

    private void 添加参数()
    {
        var 参数名 = $"参数{当前效果.参数.Count + 1}";
        当前效果.参数[参数名] = 0;
        StateHasChanged();
    }

    private void 移除参数(string 参数名)
    {
        当前效果.参数.Remove(参数名);
        StateHasChanged();
    }

    private void 更新参数名(string 旧参数名, string 新参数名)
    {
        if (当前效果.参数.TryGetValue(旧参数名, out var 值))
        {
            当前效果.参数.Remove(旧参数名);
            当前效果.参数[新参数名] = 值;
        }
        StateHasChanged();
    }

    private void 更新参数값(string 参数名, string 新값)
    {
        当前效果.参数[参数名] = 新값;
        StateHasChanged();
    }

    private void 效果类型改变(ChangeEventArgs e)
    {
        var 效果类型 = e.Value?.ToString() ?? "";
        if (!string.IsNullOrEmpty(效果类型))
        {
            // 根据效果类型加载默认参数模板
            var 模板 = 效果管理器.获取参数模板(效果类型);
            if (模板 != null)
            {
                当前效果.参数.Clear();
                foreach (var 参数定义 in 模板.参数定义)
                {
                    当前效果.参数[参数定义.参数名] = 参数定义.默认값;
                }
            }
        }
        StateHasChanged();
    }

    private async Task 保存效果()
    {
        if (string.IsNullOrWhiteSpace(当前效果.名称))
        {
            await JSRuntime.InvokeVoidAsync("alert", "请输入效果名称");
            return;
        }

        if (string.IsNullOrWhiteSpace(当前效果.效果类型))
        {
            await JSRuntime.InvokeVoidAsync("alert", "请选择效果类型");
            return;
        }

        try
        {
            // 更新时间
            当前效果.更新时间 = DateTime.Now;
            
            // 如果没有创建时间，设置为当前时间
            if (当前效果.创建时间 == DateTime.MinValue)
            {
                当前效果.创建时间 = DateTime.Now;
            }

            // 保存到效果管理器
            await 效果管理器.保存效果配置(当前效果);
            
            // 更新显示列表
            if (!IsEditing)
            {
                效果列表.Add(当前效果);
            }
            else
            {
                var existingEffect = 效果列表.FirstOrDefault(s => s.Id == 编辑中的效果Id);
                if (existingEffect != null)
                {
                    var index = 效果列表.IndexOf(existingEffect);
                    效果列表[index] = 当前效果;
                }
            }

            显示编辑弹窗 = false;
            应用筛选();
            StateHasChanged();
        }
        catch (Exception ex)
        {
            Logger.LogError(ex, "保存效果时发生错误");
            await JSRuntime.InvokeVoidAsync("alert", "保存效果时发生错误: " + ex.Message);
        }
    }
}